<%@include file="_header.jsp"%>
<title>${inhoud.attendDigitalClassTitle}</title>
<script src="js/movie-player/js/hdwebplayer.js" type="text/javascript"></script>
<link href="css/digital_class.css?version=<%= (int) (Math.random() * 100000000)%>" rel="stylesheet" type="text/css">
</head>
<body>

    <c:choose>
        <c:when test="${userLevel == null}">
            <%@include file="errorPage.jsp"%>
        </c:when><c:otherwise>
            <% if (request.getParameter("embedded") == null) {%>
            <%@include file="_menu.jsp"%>
            <div class="sidebar">

                <div class="redbar"><a href="#"><div id="bar-textcontent">${courseName}</div></a>
                </div>
                <div id="sidescreen">

                    <ul class="thumbnails">
                        <li class="span4">
                            <div class="thumbnail">
                                <h3>${inhoud.attendDigitalClassTitle}</h3>
                                <img src="icons/blackboard.png" alt="">

                                <p>${inhoud.attendDigitalClassT4}</p>
                            </div>
                        </li>
                        <div class="insertext-thumbnail">
                            ${inhoud.attendDigitalClassT5}
                        </div>
                    </ul>


                </div>

            </div>

            <div class="wrappermain">

                <div class="digitalclass">
                    <div id="subheader"> <div id="bar-textcontent">${inhoud.attendDigitalClassTitle} </div></div>
                    <div class="main-digital" style="padding-top:20px;"> 
                        <% } else {%>          
                        <style type="text/css">body {color:white;}</style>
                        <% }%>

                        <c:choose>
                            <c:when test="${selectDigitalClasses != null}">

                                ${inhoud.teachHomeT2}
                                <table class="table" >
                                    <td>${inhoud.changeCourseT}</td>
                                    <td>Module</td>
                                    <td>${inhoud.description}</td>
                                    <td>${inhoud.planClassT}</td>
                                    <td>${inhoud.planClassT2}</td>
                                    <td>${inhoud.planClassT3}</td>
                                    <td>Max<br>students</td>>
                                    <td>&nbsp;</td>
                                    <c:forEach var="curClass" items="${selectDigitalClasses}">
                                        <tr>
                                            <td>
                                                ${curClass.course.courseName}
                                            </td>
                                            <td>
                                                ${curClass.module.moduleName}   
                                            </td>
                                            <td>
                                                ${curClass.description}
                                            </td>      
                                            <td>
                                                ${curClass.date}
                                            </td>          
                                            <td>
                                                ${curClass.startTime}
                                            </td>      
                                            <td>
                                                ${curClass.endTime}
                                            </td>      
                                            <td>
                                                ${curClass.maxStudents}
                                            </td>         
                                            <td>
                                                <a href="attend_digital_class?ID=${curClass.digitalClassID}"><img src="icons/next_button.png"></a>
                                            </td>
                                        </tr>
                                        ${digitalClass.maxStudents}
                                    </c:forEach>
                                </table>        

                            </c:when><c:otherwise>
                                <div class="digital_class">
                                    <div class="hidden_code" id="video_stream_inactive">
                                        <center><img src="images/waiting.gif" width="300px" /></center>    
                                    </div>   
                                    <div class="hidden_code" id="session_pending">
                                        <br><br><h1>${inhoud.attendDigitalClassT}</h1>   
                                    </div>         




                                    <div class="containerFirst">
                                        <div id="video_stream">
                                            <h1>${inhoud.attendDigitalClassT2}</h1>
                                        </div>
                                    </div>            
                                    <div class="container">
                                        <div id="askQuestion" style="width:290px; text-align: left;"></div>
                                        <div id="viewQuestion" style="width:290px; text-align: left; max-height:300px; overflow-x: hidden; overflow-y: auto;"></div>
                                        <div id="viewAnswer" style="width:290px; text-align: left;"></div>
                                        </iframe>                  
                                    </div>


                                    <div class="containerFirst">
                                        <div id="tabs">
                                            <ul>
                                                <li><a href="#tabs-1">Whiteboard</a></li>
                                                <li><a href="#tabs-2">Powerpoint</a></li>
                                                <li><a href="#tabs-3">Media</a></li>
                                            </ul>
                                            <div id="tabs-1">

                                            </div>
                                            <div id="tabs-2">
                                                <div id="class_media">&nbsp;</div>
                                            </div>
                                            <div id="tabs-3">

                                            </div>
                                        </div>                

                                    </div>               
                                </div>
                                <script language="javascript">
                                    $(document).ready(function() {
                                        var digitalClassId = ${digitalClassSession.digitalClassId};
                                        var classActive;
                                        var videoActive = false;
                                        var videoSource = "";
                                        var videoPlaying = false;
                                        var mediaActive = false;
                                        var mediaSource = "";
                                        var mediaSlide = 1;
                                        var mediaActiveType = 0;
                              
                                        $("#tabs").tabs();
                                        $("#tabs-2").html("<iframe src=\"https://docs.google.com/gview?url=http://www.pcvanvelzen.nl/32l.ppt&embedded=true\" width=\"300px\" height=\"300px\">");

                                        $('#askQuestion').load('askQuestion.jsp', function() {});
                                        $('#viewQuestion').load('viewQuestion', function() {});
                                        $('#viewAnswer').load('viewAnswer.jsp', function() {});
                
                                        setInterval(function(){                
                                            $('#viewQuestion').load('viewQuestion', function() {}); 
                                        }, 1000);
                
                                        setInterval(function(){
                                            $.ajax({
                                                url: 'digital_class/media?ID=' + digitalClassId,
                                                dataType: 'json',
                                                success: function( data ) {
                                                    if(classActive != data.classActive){   
                                                        if(data.classActive == false){
                                                            $("#video_stream").html($("#session_pending").html());
                                                            $("#class_media").html("");
                                                            $(".container").hide();
                                                        } else {
                                                            makePlayer(data); 
                                                            showMedia(data);
                                                            $(".container").show();
                                                        }
                                                    } else {
                                                        if(videoActive != data.videoActive || videoPlaying != data.videoPlaying || videoSource != data.videoSource){
                                                            makePlayer(data);
                                                        }
                                                        if(mediaActive != data.mediaActive || mediaSource != data.mediaSource || mediaSlide != data.mediaSlide || mediaActiveType != data.mediaActiveType){
                                                            showMedia(data);
                                                        }
                                                    }
                                                    $("#tabs-1").html(data.blackBoardText);
                            
                                                    classActive = data.classActive;
                                                    videoActive = data.videoActive;
                                                    videoPlaying = data.videoPlaying;   
                                                    videoSource = data.videoSource;
                                                    mediaActive = data.mediaActive;
                                                    mediaSource = data.mediaSource;
                                                    mediaSlide = data.mediaSlide;    
                                                },
                                                error: function( data ) {
                                                    //alert( "ERROR:  " + data.html );
                                                }
                                            });                    
                                        }, 400);  
                
                                        function showMedia(data){
                                            if(data.mediaActive == true){
                                                $("#tabs").show();
                                                if(mediaActiveType != data.mediaActiveType){
                                                    $("#tabs-1").hide();
                                                    $("#tabs-2").hide();
                                                    $("#tabs-3").hide();

                                                    $("#tabs-"+data.mediaActiveType).show();
                                                }


                                                $("#tabs-1").html(data.blackBoardText);
                                                if(mediaSource != data.mediaSource){
                                                    $("#tabs-3").html('<img src="' + data.mediaSource + '" height="300px">');        
                                                }
                                                //$("#class_media").html('<img src="' + data.mediaSource + '" height="300px">');
                                            } else {
                                                $("#tabs").hide();
                                            }
                                        }                

                                    });
            
                                    function submitForm(ID, target){
                                        $.ajax({
                                            data: $("#"+ID).serialize(), 
                                            type: $("#"+ID).attr('method'),
                                            url: $("#"+ID).attr('action'), 
                                            success: function(response) {
                                                $('#'+target).html(response);
                                                $('#viewQuestion').load('viewQuestion', function() {});
                      
                                            }
                                        });                    
                                    }            



                                    function makePlayer(data){
                                        if(data.videoActive == true){
                                            $("#video_stream").html('<div id="current_movie"></div>');
                                            hdwebplayer({ 
                                                id        : 'current_movie',
                                                swf       : 'js/movie-player/player.swf', 
                                                width     : '100%', 
                                                height    : '300px' ,
                                                video     : data.videoSource,
                                                autoStart : data.videoPlaying
                                            });   
                                        } else {
                                            $("#video_stream").html($("#video_stream_inactive").html());
                                        }
                                    }
                                </script>  
                            </c:otherwise></c:choose>        
                            </body>
                    </c:otherwise></c:choose>
                </html>